<template>
  <div class="product">
    <div class="content">
      <div class="pic">
        <div class="tools">
          <div class="back ball" @click="$router.back()">
            <i class="icon icon-angle-left"></i>
          </div>
          <div class="right">
            <div class="share ball">
              <i class="icon icon-share"></i>
            </div>
            <router-link to="/cart" class="cart-link ball">
              <i class="icon icon-white-cart"></i>
              <div class="quantity">{{cartsQuantity}}</div>
            </router-link>
          </div>
        </div>
        <swiper :options="swiperOption">
          <swiper-slide v-for="(pic,index) in productDetail.pics" :key="index">
            <img :src="pic" alt="">
          </swiper-slide>
        </swiper>
        <div class="poins"></div>
      </div>
      <div class="info" v-my="10" v-px v-py="20">
        <div class="price">￥{{productDetail.price | price}}</div>
        <div class="raw-price">￥{{productDetail.rawPrice | price}}</div>
        <div class="name">{{ productDetail.name }}</div>
        <div class="other">
          <span>快递{{productDetail.yf}}</span>
          <span>月销{{productDetail.sale}}</span>
        </div>
      </div>
      <yd-cell-group>
        <yd-cell-item arrow>
          <span slot="left">
            服务：7天无理由退款 · 正品保证 · 运费险
          </span>
        </yd-cell-item>
        <yd-cell-item arrow>
          <span slot="left">
            参数：价格区间 品牌...
          </span>
        </yd-cell-item>
      </yd-cell-group>
      <yd-cell-group>
        <yd-cell-item arrow>
          <span slot="left">
            配送至：广东省广州市天河区
          </span>
        </yd-cell-item>
        <yd-cell-item arrow>
          <span slot="left" @click="showChooseColor">
            选择颜色分类
          </span>
        </yd-cell-item>
      </yd-cell-group>

      <yd-popup v-model="show" position="bottom">
        <yd-cell-group title="颜色选择" v-p>
          <yd-cell-item type="radio" v-for="(item,index) in productDetail.colors" :key="index">
            <span slot="left">{{item}}</span>
            <input slot="right" type="radio" :value="item" v-model="color" />
          </yd-cell-item>
          <yd-cell-item>
            <span slot="left">你选择的颜色是：</span>
            <span slot="right">{{color}}</span>
          </yd-cell-item>
        </yd-cell-group>
      </yd-popup>

      <div v-p v-pt="30" v-my="10" class="comment-wrap">
        <h2>商品评论({{ productDetail.comments.length }})</h2>
        <div class="comment" v-for="(comment,index) in productDetail.comments" :key="index">
          <yd-flexbox class="userInfo">
            <div class="avatar" v-mr="20">
              <img v-lazy="comment.userInfo.avatar" alt="">
            </div>
            <yd-flexbox-item class="username">{{comment.userInfo.username}}</yd-flexbox-item>
          </yd-flexbox>
          <p class="content">{{comment.content}}</p>
          <div class="color">颜色分类：{{comment.product.color}}</div>
        </div>
        <yd-flexbox class="more">
          <Button outline type="primary" v-px="34" round v-py="20">查看全部评论</Button>
        </yd-flexbox>
      </div>
      <div class="detail-pics">
        <h2 v-my>图片详情</h2>
        <img v-lazy="pic" :key="index" v-for="(pic,index) in productDetail.detailPics" alt="">
      </div>
    </div>
    <yd-flexbox class="bottom" align="center">
      <yd-flexbox-item>
        <yd-flexbox>
          <yd-flexbox-item>
            <div class="item">
              <i class="icon icon-kefu"></i>
              <p>客服</p>
            </div>
          </yd-flexbox-item>
          <yd-flexbox-item>
            <div class="item">
              <i class="icon icon-star"></i>
              <p>收藏</p>
            </div>
          </yd-flexbox-item>
        </yd-flexbox>
      </yd-flexbox-item>
      <yd-flexbox-item>
        <Button type="primary" @click="addCart" outline round>加入购物车</Button>
        <Button type="primary" round>立即购买</Button>
      </yd-flexbox-item>
    </yd-flexbox>
  </div>
</template>
<script>
import { mapActions, mapState, mapGetters } from "vuex";
export default {
  name: "Product",
  computed: {
    ...mapGetters(["cartsQuantity"])
  },
  data() {
    return {
      swiperOption: {
        pagination: {
          el: ".poins",
          bulletClass: "point",
          bulletActiveClass: "point-active"
        }
      },
      productDetail: {
        pics: [
          require("../assets/img/products/detail/main.jpg"),
          require("../assets/img/products/detail/main.jpg"),
          require("../assets/img/products/detail/main.jpg"),
          require("../assets/img/products/detail/main.jpg"),
          require("../assets/img/products/detail/main.jpg")
        ],
        name: "珠江钢琴三角钢琴平台琴GP 148 黑白两色演奏实木三角琴",
        yf: 10,
        sale: 159,
        price: 36800,
        rawPrice: 46600,
        colors: ["红色", "黄色", "绿色"],
        comments: [
          {
            userInfo: {
              id: 1,
              avatar: require("../assets/img/products/detail/avatar.jpg"),
              username: "不是好人"
            },
            content: `乐器收到了，非常好非常好非常好非常好非常好非常好非常好非非常好常好非常好非常好非常好非常好非常好`,
            product: {
              color: "黑色"
            }
          }
        ],
        detailPics: [
          require("../assets/img/products/detail/detail1.jpg"),
          require("../assets/img/products/detail/detail2.jpg")
        ]
      },
      color: "红色",
      product_id: this.$route.params.id,
      show: false
    };
  },

  methods: {
    ...mapActions(["addProductToCarts"]),
    showChooseColor() {
      this.show = true;
    },
    addCart() {
      /* 
        在真实业务中，保存的数据只有id和checked
      */
      const result = this.addProductToCarts({
        id: this.product_id,
        pic: this.productDetail.pics[0],
        checked: false,
        quantity: 1,
        price: 399,
        name: this.productDetail.name
      });

      if (result) {
        this.$dialog.toast({
          mes: "添加购物车成功！",
          timeout: 1500,
          icon: 'success'
        });
      }
    }
  }
};
</script>

